<script lang="ts" setup>
/** 表情组件 */

import Icon from '../../../components/Icon.vue'
import { emojiMap } from '../../utils/emoji'
import { t } from '../../utils/i18n'
import { culculateMatrix } from '../../utils/matrix'

const emit = defineEmits(['emojiClick', 'emojiSend', 'emojiDelete'])
// 七个一行
const emojiArr = Object.keys(emojiMap)
const emojiColNum = 7
const emojiMatrix = culculateMatrix(emojiArr, emojiColNum)

function handleEmojiClick(emoji: any) {
  emit('emojiClick', emoji)
}

function handleEmojiDelete() {
  emit('emojiDelete')
}

function handleEmojiSend() {
  emit('emojiSend')
}
</script>

<template>
  <view class="msg-face-wrapper">
    <view class="msg-face">
      <view v-for="(emojiRow, rowIndex) in emojiMatrix" class="msg-face-row">
        <view
          v-for="key in emojiRow"
          :key="key"
          class="msg-face-item"
          @tap.stop="
            () => {
              handleEmojiClick({ key, type: emojiMap[key] })
            }
          "
        >
          <Icon :size="27" :type="emojiMap[key]"></Icon>
        </view>
        <!-- 下面放三个看不到的 Icon 占个位 -->
        <Icon
          v-if="rowIndex + 1 === Math.ceil(emojiArr.length / emojiColNum)"
          class="msg-face-delete"
          :size="27"
          type="icon-tuigejian"
        ></Icon>
        <Icon
          v-if="rowIndex + 1 === Math.ceil(emojiArr.length / emojiColNum)"
          class="msg-face-delete"
          :size="27"
          type="icon-tuigejian"
        ></Icon>
        <Icon
          v-if="rowIndex + 1 === Math.ceil(emojiArr.length / emojiColNum)"
          class="msg-face-delete"
          :size="27"
          type="icon-tuigejian"
        ></Icon>
      </view>
    </view>
    <view class="emoji-block"></view>
    <view class="msg-face-control">
      <view class="msg-delete-btn" @tap="handleEmojiDelete">
        <Icon type="icon-tuigejian" :size="25" color="#333" />
      </view>
      <view class="msg-send-btn" @tap="handleEmojiSend">{{ t('sendText') }}</view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.msg-face-wrapper {
  box-sizing: border-box;
}
.msg-face-control {
  position: fixed;
  bottom: 16rpx;
  right: 20rpx;
  z-index: 8;
}

.emoji-block {
  width: 100%;
  height: 80rpx;
  background-color: transparent;
}

.msg-face {
  display: flex;
  flex-direction: column;
  padding-bottom: 20rpx;
  // flex-wrap: wrap;

  &-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 10rpx 24rpx;

    &:last-child {
      flex-basis: 57.14%;
    }
  }

  &-item {
    font-size: 54rpx;
  }

  &-delete {
    font-size: 54rpx;
    visibility: hidden;
  }
}

.msg-face-control {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.msg-send-btn {
  padding: 12rpx 32rpx;
  color: #fff;
  background-color: #337eff;
}

.msg-delete-btn {
  background-color: #fff;
  margin-right: 20rpx;
  padding: 0 32rpx;
}
</style>
